<template>
	<view>
		<vk-uni-pay
			ref="vkPay"
			:status.sync="vkPay.status"
			:code-url.sync="vkPay.codeUrl"
			:query-payment-action="vkPay.queryPaymentAction"
			:page-show="vkPay.pageShow"
			:polling="vkPay.polling"
			:return-url="vkPay.returnUrl"
		></vk-uni-pay>

		<!-- 弹窗开始 -->

		<!-- #ifdef H5 -->
		<!-- 二维码支付弹窗开始 -->
		<view class="pay-qrcode-popup" v-if="form1.provider !== 'vkspay' && vkPay.status < 2 && vkPay.codeUrl">
			<view class="pay-qrcode-popup-mask" @click="cancelPay"></view>
			<view class="pay-qrcode-popup-content">
				<vk-uni-qrcode :text="vkPay.codeUrl" :size="450"></vk-uni-qrcode>
				<view class="pay-qrcode-popup-info">
					<view>
						<text class="pay-qrcode-popup-info-fee">{{ (form1.total_fee / 100).toFixed(2) }}</text>
						<text>元</text>
					</view>
					<view v-if="form1.provider == 'wxpay'">请用微信扫码支付</view>
					<view v-else-if="form1.provider == 'alipay'">请用支付宝扫码支付</view>
				</view>
				<button v-if="vkPay.status == 1" type="primary" @click="queryPayment">我已完成支付</button>
			</view>
		</view>
		<!-- 二维码支付弹窗结束 -->
		<!-- #endif -->

		<!-- VksPay个人支付二维码支付弹窗开始 -->
		<vk-uni-pay-qrcode-popup
			v-if="form1.provider === 'vkspay'"
			:provider="form1.provider"
			:provider-pay-method="form1.provider_pay_method"
			:status="vkPay.status"
			:code-url="vkPay.codeUrl"
			:qrcode-image="vkPay.qrcodeImage"
			:total-fee="form1.total_fee"
			:out-trade-no="form1.out_trade_no"
			@close="cancelPay"
			@afresh="afreshPayment"
			@query="queryPayment"
		></vk-uni-pay-qrcode-popup>
		<!-- VksPay个人支付二维码支付弹窗开始 -->

		<!-- 外部浏览器H5支付弹窗确认开始 -->
		<view class="pay-confirm-popup" v-if="vkPay.confirmShow">
			<view class="pay-confirm-popup-content">
				<view class="pay-confirm-popup-title">请确认支付是否已完成</view>
				<view><button type="primary" @click="queryPayment">已完成支付</button></view>
				<view class="pay-confirm-popup-refresh"><button type="default" @click="afreshPayment">支付遇到问题，重新支付</button></view>
				<view class="pay-confirm-popup-cancel" @click="vkPay.confirmShow = false">暂不支付</view>
			</view>
		</view>
		<!-- 外部浏览器H5支付弹窗确认结束 -->

		<!-- 弹窗结束 -->

	</view>
</template>

<script>
	export default {
		name: "pay-order",
		props: {

		},
		data() {
			return {
				vkPay: {
					/**
					 * 查询支付状态的云函数配置
					 * 如果是非路由框架，则action为字符串，值为云函数名称
					 * 如果是路由框架，则按下方配置填写
					 */
					queryPaymentAction: {
						name: "vk-pay", // 云函数名称
						action: "pay/queryPayment", // 路由模式下云函数地址
						actionKey: "action", // 路由模式下云函数地址的识别key
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// PC支付的付款二维码地址
					codeUrl: "",
					// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
					status: 0,
					// 当前页面是否显示
					pageShow: true,
					// 启用轮询检测订单支付状态（仅h5支付有效）
					polling: true,
					// 微信手机外部浏览器H5支付时有效，必须是http或https开头的绝对路径，且在微信H5支付配置的域名白名单中。你还需要将此H5域名加入uniCloud白名单
					// 如果此值为空，则默认使用返回当前页面，返回的页面url参数会带上confirmShow=true&out_trade_no=实际订单号
					returnUrl: "",
					// 确认已支付的弹窗开关（微信手机外部浏览器H5支付时有效）
					confirmShow: false
				},
				// 表单请求数据
				form1: {
					provider: "wxpay",
					provider_pay_method: "", // vkspay个人支付接口专用
					out_trade_no: "",
					openid: "", // 公众号支付必传，小程序支付可以不传
					total_fee:"", // 金额
					type:"goods", // 商品订单
				}
			}
		},
		created() {
			let vk = uni.vk;
			// #ifdef H5
			// 如果是微信公众号，则需要提前获取openid
			let env = vk.h5.getEnv();
			if (env === "h5-weixin") {
				if (!this.form1.openid) {
					this.form1.openid = vk.getStorageSync("vkmall.h5-weixin-openid") || vk.getVuex('$user.userInfo.wx_openid.h5-weixin');
				}
				if (!this.form1.openid) {
					vk.myfn.user.getH5WeixinCode({
						scope: "snsapi_base",
						state: "openid"
					});
				}
			}
			// #endif
		},
		methods: {
			// 发起支付
			createPayment(obj = {}) {
				let that = this;
				let { form1, vk } = that;
				let {
					orderInfo,
					provider
				} = obj;
				if (!provider) {
					// #ifdef MP-WEIXIN
					provider = "wxpay";
					// #endif
					// #ifdef MP-ALIPAY
					provider = "alipay";
					// #endif
				}
				form1.out_trade_no = orderInfo.order_no;
				form1.provider = provider;
				form1.total_fee = vk.pubfn.getData(orderInfo, "amount_info.need_payment_amount");

				// #ifdef H5
				// 如果是微信公众号，且是微信支付，则尝试从userInfo中获取openid
				let env = vk.h5.getEnv();
				if (env === "h5-weixin" && provider === "wxpay") {
					if (!form1.openid) form1.openid = vk.getVuex('$user.userInfo.wx_openid.h5-weixin');
				}
				// vkspay支持同步回调地址
				form1.return_url = window.location.href;
				// #endif

				that.$refs.vkPay.createPayment({
					// 如果是非路由框架，则外层action不再是json，而为字符串，值为云函数名称，如 action: "你的云函数名称"
					// 如果是路由框架，则按下方配置填写
					action: {
						name: "router", // 云函数名称
						action: "client/order.createPaymentForGoods", // 路由模式下云函数地址
						actionKey: "$url", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// 请求数据
					data: form1,
					// 支付订单创建成功回调
					create: res => {
						console.log('pay-create', res)
						this.form1.out_trade_no = res.out_trade_no;
						this.form1.provider = res.provider;
						this.form1.provider_pay_method = res.provider_pay_method;
					},
					// 成功回调
					success: res => {
						vk.toast("支付成功", "success");
						console.log("pay-success", res);
						this.checkPayment(form1.out_trade_no, obj.success);
					},
					// 失败回调
					fail: res => {
						if (res.failType === "create") {
							// 创建支付失败时提示
							vk.alert(res.msg);
						} else if (res.failType === "request") {
							// 请求支付失败时提示
							vk.toast("请求支付失败");
						} else if (res.failType === "result") {
							// 支付结果失败时提示
							vk.toast("支付失败");
						}
					},
					// 取消回调
					cancel: res => {
						vk.toast("用户取消支付");
						// 取消订单
						// vk.callFunction({
						// 	url: 'client/user/kh/order/delete',
						// 	data:{
						// 		_id: obj._id
						// 	},
						// 	success:function(data){

						// 	}
						// });
					}
				});
			},
			// 支付状态查询
			queryPayment() {
				let vk = uni.vk;
				let that = this;
				// 支付状态查询你可以直接查你的订单表，看订单是否已支付（因为最终判定用户是否支付成功应该以你的订单表为准）
				// 如果vkPay.queryPayment接口返回支付成功，但你的订单表查询到未支付，代表你的异步回调函数写的有问题。
				that.$refs.vkPay.queryPayment({
					title: "查询中...",
					data: {
						out_trade_no: that.form1.out_trade_no
					},
					needAlert: true,
					success: data => {
						that.vkPay.status = 2; // 标记为已支付
						that.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
						vk.toast(data.msg);
					},
					fail: (res = {}) => {
						if (res.msg === "订单已退款") {
							that.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
						}
					}
				});
			},
			// 检测支付状态
			checkPayment(out_trade_no, success){
				this.form1.out_trade_no = out_trade_no;
				vk.callFunction({
					url: 'client/order.queryPayment',
					title:'请求中...',
					data:{
						out_trade_no: this.form1.out_trade_no
					},
					success:function(data){
						if (typeof success) success(data);
						//vk.alert('支付成功');
					}
				});
			},
			// 取消支付
			cancelPay() {
				this.vkPay.status = 0;
				this.vkPay.codeUrl = "";
			}
		}
	}
</script>

<style lang="scss" scoped>

/* 外部浏览器H5支付弹窗确认开始 */
.pay-confirm-popup {
	position: fixed;
	width: 100vw;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	.pay-confirm-popup-content {
		width: 550rpx;
		margin: 50% auto 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx;
		.pay-confirm-popup-title {
			text-align: center;
			padding: 20rpx 0;
			margin-bottom: 30rpx;
		}
		.pay-confirm-popup-refresh{
			margin-top: 20rpx;
		}
		.pay-confirm-popup-cancel{
			margin-top: 20rpx;
			text-align: center;
		}
	}
}
/* 外部浏览器H5支付弹窗确认结束 */

/* 二维码支付弹窗开始 */
.pay-qrcode-popup {
	position: fixed;
	width: 100vw;
	top: 0;
	bottom: 0;
	.pay-qrcode-popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.pay-qrcode-popup-content {
		position: relative;
		width: 500rpx;
		margin: 40% auto 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx;
		box-sizing: content-box;
		text-align: center;
		.pay-qrcode-popup-info{
			text-align: center;
			padding: 20rpx;
			.pay-qrcode-popup-info-fee{
				color: red;
				font-size: 60rpx;
				font-weight: bold;
			}
		}
	}
}
/* 二维码支付弹窗结束 */
</style>
